<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-07 10:24:34
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-07-24 16:05:30
 * @FilePath: \website-reconstruction---vue\src\components\sections\home\ProductApplications.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Application } from '@/types/selfdefine/Layout'
import { DataProp } from '@/types/selfdefine/Layout'
import { getRandomAnimation } from '@/utils/tools/tools'
// 假设需要点击后跳转到对应的应用页面或详情页
const router = useRouter()
const props = defineProps<{
  data: DataProp | undefined
}>()
// 应用场景数据

// 点击跳转方法
const goToApplication = (route: string) => {
  if (route) {
    router.push(route)
  }
}
</script>

<template>
  <div class="main-section categories-view1-full">
    <span class="light-transparent"></span>
    <div class="container" v-if="data.partTitle">
      <div class="section-header text-center">
        <div class="section-heading">
          <h3 class="text-custom-white">
            {{ data.partTitle.slice(0, 2) }}
            <span class="text-yellow">{{ data.partTitle.slice(2) }}</span>
          </h3>
          <div class="section-description">
            <p class="text-light">
              {{ data.content }}
            </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <!-- Categories List -->
          <div class="categories-1 categories-view1">
            <ul class="row">
              <li
                v-for="app in data.partContentVoList"
                :key="app.partId"
                :class="`col-5th col-md-6 wow ${getRandomAnimation()}`"
              >
                <div
                  class="categories-view2-wrap"
                  @click="goToApplication(app.url)"
                >
                  <img
                    :src="app.imageUrl"
                    alt=""
                    style="max-width: 100%; height: auto"
                  />
                  <a href="#"
                    ><h6>{{ app.content }}</h6></a
                  >
                </div>
              </li>
            </ul>
          </div>
          <!-- Categories List -->
        </div>
      </div>
    </div>
  </div>
</template>
